import React, {useEffect, useState} from 'react';
import '../App.css';
import Navbar from './Navbar';
import WallpaperSector from './WallpaperSector';
import { WallpaperEntity } from "./WallpaperObject";
import {fetchData} from "../apis/api";
import {Spin} from "antd";
import {useNavigate} from "react-router-dom";

export type WallpaperListType = {
    "currentPage": number
    "totalPage": number
    "offset": number
    "total": number
    "list": WallpaperEntity[]
}
function App() {

    const [wallpaperResponse, setWallpaper] = useState<WallpaperListType | null>(null);

    const [error, setError] = useState<string | null>(null);
    const [loading, setLoading] = useState<boolean>(true);

    const [searchTag, setSearchTag] = useState<string>("");
    const [status, setStatus] = useState<number | null>(0);
    const [page, setPage] = useState<number>(1);
    const navigate = useNavigate();

    // 跳转壁纸详情页
    const jumpDetail = (wallpaperId: number) => {
        navigate('/dialog/'+wallpaperId);
    };
    // 跳转到前台主页
    const jumpHome = () => {
        navigate('/');
    };

    const getWallpaper = async (page: number, searchTag: string, status: number|null) => {
        try {
            setLoading(true);
            if (status === 999){
                // 999:全选
                const wallpaperRequest = await fetchData('/admin/wallpaper/get-by-status?status=&offset=12&page=' + page + "&searchStr=" + encodeURIComponent(searchTag));
                setWallpaper(wallpaperRequest);
            } else {
                const wallpaperRequest = await fetchData('/admin/wallpaper/get-by-status?status='+(status || '')+'&offset=12&page=' + page + "&searchStr=" + encodeURIComponent(searchTag));
                setWallpaper(wallpaperRequest);
            }
        } catch (error) {
            setError("获取壁纸数据失败");
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        // page 或者 searchTag 改变的时候，更新wallpaper数据
        getWallpaper(page, searchTag, status);
    }, [page, searchTag, status]);

    // 暴露给下层组件的刷新（不改变状态）
    const updateResult = () => {
        getWallpaper(page, searchTag, status);
    }

    // 暴露给 WallpaperSector 组件调用的 setPage 函数
    const updatePage = (newPage: number) => {
        setPage(newPage);
    };
    // 暴露给 Navbar 组件调用的 setSearchTag 函数
    const updateSearch = (search: string, status: number|null) => {
        setSearchTag(search);
        setStatus(status);
        setPage(1);
    };

    if (error) {
        return <div>{error}</div>;
    }

    if (!wallpaperResponse || loading){
        return <div className="App">
            <Navbar updateSearch={updateSearch} updateResult={updateResult}/>
            <div className="loading">
                <Spin size="large">
                </Spin>
            </div>
        </div>
    }

  return (
    <div className="App">
        <Navbar updateSearch={updateSearch} updateResult={updateResult}/>
        <div className="content">
            <WallpaperSector updatePage={updatePage} updateResult={updateResult} wallpapers={wallpaperResponse}/>
        </div>
    </div>
  );
}

export default App;
